<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <link rel="stylesheet" href="/assets/css/global.css">
    <title>v-bind 实例!</title>
    <style>
        .red{
            color: red;
        }
        .fz30{
            font-size: 30px;
        }
    </style>
</head>

<body>
    <h1>v-bind 实例!</h1>
    <hr>
    <div id="app">
       <p><img v-bind:src="imgSrc" alt="" width="300"></p>
       <p><a :href="webUrl" target="_blank">百度</a></p> 
       <hr>
       <div :class="className">1、绑定class</div>
       <div :class="{red:isTrue}">2、绑定class中的判断</div>
       <div :class="[classA,classB]">3、绑定class中的数组</div>
       <div :class="isTrue?classA:classB">4、绑定class中三元运算符</div>
       <hr>
       <div>
           <input type="checkbox" id="isOK" v-model="isTrue">
           <label for="isOK">isTrue = {{isTrue}}</label>
       </div>
       <hr>
       <div :style="{color:blue,fontSize:font}">5、绑定style</div>
       <div :style="styleObj">6、用对象绑定style样式</div>

    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                imgSrc:'../assets/img/img1.jpg',
                webUrl:'https://www.baidu.com',
                className:'red',
                isTrue: false,
                classA:'red',
                classB:'fz30',
                blue:'blue',
                font:'20px',
                styleObj:{
                    color:'#00925f',
                    fontSize:'24px'
                }
            }
        })
    </script>
</body>

</html>